<!-- 问题管理——全部问题 -->
<template>
  <div class="app-container">
    <header-search class="g-w100 g-h100 colon">
      <el-form
        :model="queryParams"
        :inline="true"
        @keyup.enter.native="searchQuery"
        @submit.native.prevent
      >
        <el-form-item label="标题">
          <el-input v-model="queryParams.orderTitle" placeholder="请输入问题标题" />
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="queryParams.orderNum" placeholder="请输入问题编号" />
        </el-form-item>
        <el-form-item label="发起人">
          <el-input v-model="queryParams.initiatorName" placeholder="请输入发起人名称" />
        </el-form-item>
        <el-form-item label="问题状态">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择问题状态"
            clearable
          >
            <el-option
              v-for="dict in dict.type.sys_work_order_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属应用">
          <el-select
            v-model="queryParams.appId"
            placeholder="请选择所属应用"
            clearable
          >
            <el-option
              v-for="item in searchOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="buttonArea">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="searchQuery"
          >
            搜索
          </el-button>
          <el-button class="commonBtn" icon="el-icon-refresh" @click="searchReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </header-search>

    <page-panel-new header-title="全部问题">
      <el-row :gutter="10" class="mb8 mbBottom">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['approve:workOrder:add']"
            type="primary"
            @click="handleAddToPage"
          >
            新增
          </el-button>
        </el-col>
        <el-col :span="1.5" style="margin-left: auto;">
          <el-button
            v-hasPermi="['approve:workOrder:export']"
            type="primary"
            @click="handleExport('list')"
          >
            列表导出
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['approve:workOrder:export']"
            type="primary"
            @click="handleExport('all')"
          >
            汇总导出
          </el-button>
        </el-col>
      </el-row>
      <el-table
        :data="dataSource"
        height="calc(100% - 113px)"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px 0' }"
        header-cell-class-name="table_header"
        :cell-style="{ padding: '2px' }"
        style="width: 100%; height: 100%;"
      >
        <el-table-column
          label="基础信息"
          prop="orderTitle"
          :show-overflow-tooltip="true"
          :min-width="300"
          align="left"
        >
          <template slot-scope="scope">
            <span>{{ `标题: ${scope.row.orderTitle}\n编号: ${scope.row.orderNum}\n问题类型: ${scope.row.orderTypeName} 所属应用: ${scope.row.appName}` }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          :show-overflow-tooltip="true"
          :min-width="80"
          align="center"
        >
          <template slot-scope="scope">
            <dict-tag :style="{ color: statusColor[scope.row.status]}" :options="dict.type.sys_work_order_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column
          label="日期"
          prop="initiatorTime"
          :show-overflow-tooltip="true"
          :min-width="120"
          align="left"
        >
          <template slot-scope="scope">
            <span>{{ `发起时间: ${scope.row.initiatorTime}\n回复时间: ${scope.row.lastProcessorTime || ""}\n完成时间: ${scope.row.finishTime || ""}` }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="发起人"
          prop="initiatorName"
          :show-overflow-tooltip="true"
          :min-width="100"
          align="center"
        />
        <el-table-column
          label="上一处理人"
          prop="lastProcessorName"
          :show-overflow-tooltip="true"
          :min-width="100"
          align="center"
        />
        <el-table-column
          label="操作"
          width="270px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleViewToPage(scope.row)"
            >
              查看
            </el-button>
            <el-button
              v-if="scope.row.canAudit"
              type="text"
              @click="handleAudit('pass', scope.row.orderId)"
            >
              通过
            </el-button>
            <el-button
              v-if="scope.row.canAudit"
              type="text"
              @click="handleAudit('refuse', scope.row.orderId)"
            >
              拒绝
            </el-button>
            <el-button
              v-if="scope.row.canReply"
              type="text"
              @click="handleEditToPage(scope.row)"
            >
              回复
            </el-button>
            <el-button
              v-if="scope.row.canComplete"
              type="text"
              @click="handleComplete(scope.row.orderId)"
            >
              确认完成
            </el-button>
            <el-button
              v-if="scope.row.canDelete"
              type="text"
              class="delbutton"
              @click="handleDelete(scope.row.orderId)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="ipagination.total > 0"
        :total="ipagination.total"
        :page.sync="ipagination.current"
        :limit.sync="ipagination.pageSize"
        @pagination="handlePage"
      />
    </page-panel-new>
  </div>
</template>

<script>
import { list, delConfig, complete, audit, applicationAllList } from "@/api/workOrder/allWorkOrders.js";
import { ListMixins, DeleteMixin } from "@/components/mixins/ListMixin";

export default {
  name: "AllWorkOrders",
  dicts: ["sys_work_order_status"],
  mixins: [ListMixins, DeleteMixin],
  data() {
    return {
      loading: false,
      showSearch: true,
      // 查询参数
      queryParams: {
        orderTitle: "",
        orderNum: "",
        status: ""
      },
      fn: {
        list,
        delete: delConfig
      },
      routeInfo: {
        edit: "EditWorkOrder/:action/:id?",
        add: "AddWorkOrder"
      },
      visible: false,
      statusColor: {
        AUDIT: "#e6a23c",
        REFUSE: "red",
        PROCESS: "#6969ff",
        COMPLETE: "green"
      },
      searchOption: []
    };
  },
  created() {
    this.getSelectOptions();
  },
  methods: {
    getSelectOptions() {
      this.searchOption = [];
      applicationAllList().then(response => {
        response.data.data.forEach(el => {
          this.searchOption.push({
            label: el.appName,
            value: el.appId
          });
        });
        this.searchOption.push({
          label: "其他",
          value: "other"
        });
      });
    },
    // 编辑
    handleEditToPage(row) {
      this.$router.push({
        name: this.routeInfo.edit,
        params: {
          action: "Edit",
          id: row.orderId
        },
        query: {
          pathName: `回复${row.orderNum}`
        }
      });
    },
    // 查看
    handleViewToPage(row) {
      this.$router.push({
        name: this.routeInfo.edit,
        params: {
          action: "View",
          id: row.orderId
        },
        query: {
          pathName: `查看${row.orderNum}`
        }
      });
    },
    // 新增
    handleAddToPage() {
      this.$router.push({
        name: this.routeInfo.add
      });
    },
    handleComplete(id) {
      this.$confirm("确认完成该问题吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        complete(id).then(() => {
          this.$message.success("确认成功！");
          this.loadData();
        });
      });
    },
    handleAudit(type, id) {
      this.$confirm(`确认${type === "pass" ? "通过" : "拒绝"}该问题吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        audit(type, id).then(() => {
          this.$message.success(`${type === "pass" ? "通过" : "拒绝"}成功！`);
          this.loadData();
        });
      });
    },
    handleExport(type) {
      const url = type === "all" ? "/approve/workOrder/exportStatistics" : "/approve/workOrder/exportList";
      const query = type === "all" ? {} : { ...this.queryParams };
      this.download(
        url,
        query,
        `系统问题${new Date().toISOString()}.xlsx`
      );
    }
  }
};
</script>

<style lang="less" scoped>
.app-container {
  height: 100%;
}

/deep/ .el-table {
  .cell {
    height: auto !important;
    line-height: 25px !important;

    span {
      white-space: break-spaces;
    }
  }
}
</style>